import '../public/index'
import url from '../data/url'
import request from '../data/request'
import { tableConfig, header } from '../data/config'
import store from 'store'

const base                = url.base,
      getReportList       = request.getReportList,
      getChannelList      = request.getChannelList,
      getDeveloperList    = request.getDeveloperList,
      getBuildingList     = request.getBuildingList;

let table

// 初始化表格
table = $('#table').bootstrapTable($.extend({}, tableConfig, {
  url: base + getReportList,
  queryParams: function (params) {

    return $.extend({
      currentPage : params.pageNumber,
      pageSize    : params.pageSize
    }, $('#searchForm').serializeObject())

  },
  columns: [
    {
      field: 'devName',
      title: '开发商名称',
      valign: 'middle'
    }, {
      field: 'buildName',
      title: '楼盘名称',
      valign: 'middle'
    }, {
      field: 'channel',
      title: '办理银行',
      valign: 'middle'
    }, {
      field: 'sucNum',
      title: '成功办理数',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectHandleCase toDetail">${ index }</span>`
      }
    }, {
      field: 'expand2',
      title: '成功办理金额(万元)',
      valign: 'middle',
      formatter:(index, row) => {
        return (index / 1000000).toFixed(2)
      }
    }, {
      field: 'totoalNum',
      title: '成功办理比例',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectHandleProp toDetail">${ isNaN(row.sucNum / index) ? '0%': (row.sucNum / index).toPercent(2) }</span>`
      }
    }, {
      field: 'sucOpenNum',
      title: '成功开户数',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectOpenAccount toDetail">${ index }</span>`
      }
    }, {
      field: 'totalOpenNum',
      title: '成功开户比例',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectOpenAccountProp toDetail">${ isNaN(row.sucOpenNum / index)?'0%' : (row.sucOpenNum / index).toPercent(2) }</span>`
      }
    }, {
      field: 'sucTranNum',
      title: '成功转出数',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectTurnOut toDetail">${ index }</span>`
      }
    }, {
      field: 'totalTranNum',
      title: '成功转出比例',
      valign: 'middle',
      formatter: (index, row) => {
        return `<span data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="effectTurnOutProp toDetail">${ isNaN(row.sucTranNum / index) ? '0%' : (row.sucTranNum / index).toPercent(2) }</span>`
      }
    }, {
      field: 'action',
      valign: 'middle',
      align: 'center',
      title: '操作',
      formatter: function (index, row) {
        return `<div class="btn-group">
                      <button type="button" data-developerId="${row.devId}" data-propertyId="${row.buildId}" class="btn btn-default btn-detail">查看详情</button>                  
                </div>`
      }
    }]
}))

// 初始化日期选择器
$('#exchangeBeginTime').datetimepicker({
  format: "yyyy-mm-dd",
  startView: 3,
  minView: 2,
  autoclose: true
});
$('#exchangeEndTime').datetimepicker({
  format: "yyyy-mm-dd",
  startView: 3,
  minView: 2,
  autoclose: true
});

// 初始化银行
getBank();
// 初始化开发商
getDev();
// 动态加载楼盘列表
$('#devId').on('change', () => {

  let devId = $('#devId').children('option:selected').val();

  getBuild(devId);

});

function getBank() {

  $.ajax({
    headers: header,
    url: base + getChannelList
  })
    .done(function (res) {
      console.log("初始化银行 success")
      console.log(res)

      let channel = $('#channel'),
        html = '<option value="">请选择</option>',
        i = 0,
        data = res.object,
        len = data.length

      for (; i < len; i++) {
        html += `<option value="${ data[i].channelCode }">${ data[i].channelName }</option>`
      }

      channel.html(html)

    })
    .fail(function (res) {
      console.log(res)

      layer.msg('渠道银行失败', {
        icon: 5
      })

      console.log("error")
    })
    .always(function (res) {

      console.log("complete")
    })

}
function getDev() {

  $.ajax({
    headers: header,
    url: base + getDeveloperList
  })
    .done(function (res) {
      console.log(res)

      let code = res.code;

      if (code == 0) {
        console.log("获取开发商成功")

        let project = $('#devId'),
          html = '<option value="">请选择</option>',
          i = 0,
          data = res.object,
          len = data.length;

        for (; i < len; i++) {
          html += `<option value="${ data[i].id }">${ data[i].enterInfo.enterpriseName }</option>`
        }

        project.html(html)
        $('#devId').selectize()
      } else {
        $('#devId').addClass('form-control')

        layer.msg('获取开发商失败', {
          icon: 5
        })
      }
    })
    .fail(function (res) {
      console.log(res)
      console.log("error")

    })
    .always(function (res) {
      console.log("complete")
    })
}
function getBuild(devId) {
  let data;

  if (devId) {
    data = {developersId: devId}
  } else {
    data = {}
  }

  $.ajax({
    headers: header,
    type: 'GET',
    url: base + getBuildingList,
    data: data
  })
    .done(function (res) {
      console.log(res)

      let code = res.code,
        project = $('#buildId');

      if (code === 0) {
        console.log("获取楼盘成功")

        let html = '<option value="">请选择</option>',
          i = 0,
          data = res.object,
          len = data.length;

        for (; i < len; i++) {
          html += `<option value="${ data[i].id }">${ data[i].propertyName }</option>`
        }

        project.html(html)
      } else {
        project.html('<option value="">请选择</option>')
        layer.msg('获取楼盘失败', {
          icon: 5
        })
      }
    })
    .fail(function (res) {
      console.log(res)
      console.log("error")
      let project = $('#buildingId')
      project.html('<option value="">请选择</option>')

    })
    .always(function (res) {
      console.log("complete")
    })
}

// 搜索
$('#search-btn').on('click', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({
      currentPage : 1,
     }, $('#searchForm').serializeObject())
  })
})

//跳转至详情页
$(document).on('click', '#table .btn-detail', (e) => {
  e.preventDefault()

  console.log('详情')

  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
      operateStartDate = $('#exchangeBeginTime').val(),
      operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?developerId=' + (developerId ? developerId : '') + '&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功办理数跳转至详情页
$(document).on('click', '#table .effectHandleCase', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=1&developerId=' + (developerId ? developerId : '') + '&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功办理比例跳转至详情页
$(document).on('click', '#table .effectHandleProp', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#operateEndDate').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=6&developerId=' + (developerId ? developerId : '')+'&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功开户数跳转至详情页
$(document).on('click', '#table .effectOpenAccount', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=7&developerId=' + (developerId ? developerId : '') + '&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功开户比例跳转至详情页
$(document).on('click', '#table .effectOpenAccountProp', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=8&developerId=' + (developerId ? developerId : '')+'&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功转出数跳转至详情页
$(document).on('click', '#table .effectTurnOut', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=5&developerId=' + (developerId ? developerId : '')+'&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})

//成功转出比例跳转至详情页
$(document).on('click', '#table .effectTurnOutProp', (e) => {
  e.preventDefault()

  console.log('详情')
  let developerId = $(e.target).attr('data-developerId'),
      testFlag = $('#testFlag').val(),
    operateStartDate = $('#exchangeBeginTime').val(),
    operateEndDate = $('#exchangeEndTime').val(),
      propertyId = $(e.target).attr('data-propertyId');
  window.location.href = '../depositCertifyDetail/index.html?processStatusS=9&developerId=' + (developerId ? developerId : '')+'&propertyId=' + (propertyId ? propertyId : '')+'&testFlag='+( testFlag ? testFlag : '')+'&operateStartDate='+( operateStartDate ? operateStartDate : '' ) +'&operateEndDate='+ ( operateEndDate ? operateEndDate : '');
})